<template>
  <!-- <Nav class="nav-container" /> -->
  <router-view v-slot="{ Component }">
    <component :is="Component" />
  </router-view>
</template>
<script setup >
import { onMounted, ref } from "vue";
import { useStore } from "vuex"; // 引入useStore 方法
import WS from "@/utils/websorket.js";
const store = useStore(); // 该方法用于返回store 实例

const websorket = ref(null);
const initWebsorket = () => {
  websorket.value = new WS({
    url: `ws://183.6.88.43:8008/safe_ui/action`,
    callback: res => {
      const { action } = res;
      if (action === "get_car_people_status_number") {
        store.commit("setSorketData", {
          data: {
            car: res.car,
            people: res.people
          },
          key: "get_car_people_status_number"
        });
      } else if (action === "get_single_camera_detect_info") {
        // 首页中单个摄像头的告警信息
        store.commit("setSorketData", {
          data: {
            detect_info_list: res.detect_info_list
          },
          key: "get_single_camera_detect_info"
        });
      } else if (action === "get_alarm_status_number") {
        store.commit("setSorketData", {
          data: {
            untreated: res.untreated,
            processed: res.processed,
            all_count: res.all_count
          },
          key: "get_alarm_status_number"
        });
      } else if (action === "get_device_status_number") {
        store.commit("setSorketData", {
          data: {
            camera: res.camera,
            infrared: res.infrared
          },
          key: "get_device_status_number"
        });
      } else if (action === "get_current_detect_accuracy") {
        store.commit("setSorketData", {
          data: {
            warningList: {
              today: res.today.split("|").map(e => Number(e)),
              yesterday: res.yesterday.split("|").map(e => Number(e))
            }
          },
          key: "get_current_detect_accuracy"
        });
      } else if (action === "get_new_detect_info") {
        store.commit("setSorketData", {
          data: {
            detect_info_list: res.detect_info_list
          },
          key: "get_new_detect_info"
        });
      } else if (action === "get_device_status") {
        // 每个相机的状态
        store.commit("setSorketData", {
          data: {
            cameraState: res.info.map(e => {
              return {
                id: e.camera_name,
                state: e.device_status
              };
            })
          },
          key: "get_device_status"
        });
      }
    }
  });
  websorket.value.connect();
};

onMounted(() => {
  // console.log(store); // store 实例对象
  initWebsorket();
});
</script>

<style lang="less">
@font-face {
  font-family: "Hei";
  src: url("./assets/font/SourceHanSansCN-VF.otf");
}
* {
  font-family: "Hei" !important;
}
#app {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  background: rgba(0, 16, 61, 1);
}

.el-dropdown {
  --el-dropdown-menuItem-hover-color: none !important;
  --el-dropdown-menu-box-shadow: none !important;
  --el-dropdown-menuItem-hover-fill: none !important;
  --el-dropdown-menu-index: 0 !important;
}
</style>
